<template>
  <el-dialog
    :title="'抽查'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div class="tableDate">
      <div class="button" style="width:3%;float:right;">
        <P>
          <el-button class="el-icon-plus" @click.prevent="addRow()"></el-button>
        </P>
        <p>
          <el-button class="el-icon-minus" @click.prevent="delData()"></el-button>
        </p>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          ref="table"
          tooltip-effect="dark"
          border
          stripe
          style="width: 95%"
          @selection-change='selectRow'>
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="抽取类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.extraTypeValue" placeholder="请选择">
                <el-option
                  v-for="item in extraTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="选择" align="center">
            <template slot-scope="scope">
              <el-select v-if="scope.row.extraTypeValue === 1"  v-model="scope.row.dataValue" filterable
                         placeholder="请选择" @change="dataValueChange(scope.row)">
                <el-option
                  v-for="item in hospitalOptions"
                  :key="item.hospitalId"
                  :label="item.hospitalName"
                  :value="item.hospitalId">
                </el-option>
              </el-select>
              <el-select v-if="scope.row.extraTypeValue === 2" v-model="scope.row.dataValue" filterable
                         placeholder="请选择" @change="dataValueChange(scope.row)">
                <el-option-group
                  v-for="group in departmentOptions"
                  :key="group.hospitalName"
                  :label="group.hospitalName">
                  <el-option
                    v-for="item in group.options"
                    :key="item.departmentId"
                    :label="item.departmentName"
                    :value="item.departmentId">
                  </el-option>
                </el-option-group>
              </el-select>
              <el-select v-if="scope.row.extraTypeValue === 3"
                         v-model="scope.row.dataValue"
                         filterable
                         remote
                         reserve-keyword
                         placeholder="请输入姓名"
                         :remote-method="remoteMethod"
                         @change="dataValueChange(scope.row)"
                         :loading="loading">
                <el-option-group
                  v-for="group in patientOptions"
                  :key="group.hospitalName"
                  :label="group.hospitalName">
                  <el-option
                    v-for="item in group.options"
                    :key="item.departmentPatientId"
                    :label="item.patientName"
                    :value="item.departmentPatientId">
                    <span style="float: left">{{ item.patientName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.departmentName }}</span>
                  </el-option>
                </el-option-group>
              </el-select>

            </template>
          </el-table-column>
          <el-table-column prop="extractableNumber" label="可抽取数" align="center">
          </el-table-column>
          <el-table-column label="预抽取数" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.preNumber"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
    import treeTable from "./TreeTable";

    export default {
        components: {treeTable},
        name: "test",
        data() {
            return {
                value: [],
                patientOptions: [],
                loading: false,
                //科室
                departmentOptions: [],
                visible: false,
                extraTypeOptions: [{
                    value: 1,
                    label: '医院'
                }, {
                    value: 2,
                    label: '科室'
                }, {
                    value: 3,
                    label: '个人'
                }],
                //医院
                hospitalOptions: [],
                tableData: [{
                    rowNum: 1,
                    preNumber: 0,
                    extractableNumber: 35,
                    extraTypeValue: '',
                    departmentValue: '',
                    dataValue: '',
                }, {
                    rowNum: 2,
                    preNumber: 0,
                    extractableNumber: 80,
                    extraTypeValue: '',
                    dataValue: '',
                }],
                selectlistRow: []
            }
        },
        methods: {
            init(id) {
                this.visible = true
                this.$http({
                    url: this.$http.adornUrl(`/bs/department/getListAndHospital`),
                    method: 'get'
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.hospitalOptions = data.hospitalList
                        this.departmentOptions = data.departmentList
                    }
                })
            },
            //远程获取患者数据
            remoteMethod: function (query) {
                // var reg = /^[/u4E00-\\/u9FA5]+$/;//中文校验
                // var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
                var reg = new RegExp("^[\\u4E00-\\u9FFF]+$");
                // var reg=/^[\\/u4E00-\\/u9FA5]+$/;
                if (reg.test(query)) {
                    this.loading = true;

                    this.$http({
                        url: this.$http.adornUrl(`/bs/patient/getOptionsByName`),
                        method: 'get',
                        params: {
                            patientName: query
                        }
                    }).then(({data}) => {
                        this.loading = false;
                        if (data && data.code === 0) {
                            this.patientOptions = data.data
                        }
                    })
                } else {
                    this.patientOptions = [];
                }
            },
            // 获取表格选中时的数据
            selectRow(val) {
                this.selectlistRow = val
            },
            // 增加行
            addRow() {
                var list = {
                    rowNum: '',
                    preNumber: 0,
                    extractableNumber: 0,
                    extraTypeValue: '',
                    departmentValue: '',
                    dataValue: '',
                }
                this.tableData.unshift(list)
            },
            // 删除方法
            // 删除选中行
            delData() {
                for (let i = 0; i < this.selectlistRow.length; i++) {
                    let val = this.selectlistRow
                    // 获取选中行的索引的方法
                    // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
                    // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
                    val.forEach((val, index) => {
                        this.tableData.forEach((v, i) => {
                            if (val.rowNum === v.rowNum) {
                                // i 为选中的索引
                                this.tableData.splice(i, 1)
                            }
                        })
                    })
                }
                // 删除完数据之后清除勾选框
                this.$refs.tableData.clearSelection()
            },
            //抽取类型改变
            extraTypeChange(data){
                //抽取类型

            },
            //抽取值变化
            dataValueChange(row){
                console.log(row)
                // 数据值
                this.$http({
                    url: this.$http.adornUrl(`/bs/patient/getExtractableNumber`),
                    method: 'get',
                    params:{
                        "extraType":row.extraTypeValue,
                        "dataValue":row.dataValue
                    }
                }).then(({data}) => {
                    console.log(data)
                    if (data && data.code === 0) {
                        console.log(data.data)
                        this.tableData.forEach(item =>{
                            if(item.rowNum == row.rowNum){
                                item.extractableNumber = data.data;
                            }
                        })
                    }
                })
            },
        }
    }
</script>
